<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>验证框</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lite.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'lite';
    </script>
</head>
<body>
	<style>
		.demo-exp-code td{padding:5px 0;}
		.demo-exp-code td.r-label{padding-right: 10px;}
	</style>
	<script type="text/javascript">
		$.fn.datebox.defaults.formatter = function(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+"-"+m+'-'+d;
		}
	</script>
	<h2>基础验证框</h2>
	<h3>说明:</h3>
    <span>基础验证框（validatebox）用来验证表单，在输入框上加入简单的验证 。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint lang-html"> 
		<div class="hisui-panel" title="登记" style="width:500px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:false,collapsible:true,minimizable:false,maximizable:true">
			<table>					
				<tr>
					<td class="r-label required-label">序号</td>
					<td>
						<input id="patno" class="textbox">
					</td>
					<td style="padding-left: 10px;">
						<a id="btn1" href="#" class="hisui-linkbutton">赋值</a><a id="btn" href="#" class="hisui-linkbutton" style="margin-left: 10px;">验证序号</a>
					</td>
				</tr>
				<tr>
					<td class="r-label required-label">患者姓名</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'length[3,10]'">
					</td>
				</tr>
				<tr>
					<td class="r-label required-label">邮箱</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'email'">
					</td>
				</tr>
				<tr>
					<td class="r-label required-label">URL</td>
					<td>
						<input id="urlVx" class="hisui-validatebox textbox" data-options="required:true,validType:'url'">
					</td>
					<td  style="padding-left: 10px;"> 
						<a id="btn2" href="#" class="hisui-linkbutton">禁用URL</a>
					</td>
				</tr>
				<tr>
					<td class="r-label required-label">身份证</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'idcard'">
					</td>
					<td>
						
					</td>
				</tr>
				<tr>
					<td class="r-label required-label">手机号</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'mobilephone'">
					</td>
					<td>
						12位手机号时，会自动去除首位的0
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberbox textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberspinner textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label">生日</td>
					<td>
						<input class="hisui-datebox textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label required-label" style="vertical-align: top;padding-top: 12px;">备注</td>
					<td>
						<textarea id="notett" class="textbox hisui-validatebox" placeholder="必填项" data-options="required:true" size=12 rows="2" style="height:45px;"></textarea>
					</td>
				</tr>
				<tr>
					<td class="r-label">激活</td>
					<td>
						<input class="hisui-checkbox textbox" type="checkbox">
					</td>
				</tr>
			</table>
		</div>
		</div>
		<script type="text/javascript" class="use-prettyprint">
			var init = function () {
				var valbox = $HUI.validatebox("#patno", {
					required: true,
					placeholder:"序号必填"
				});
				$("#btn1").click(function(){
					$("#patno").val("12345678").validatebox("validate");
				});
				$("#btn").click(function () {
					//$("#patno").data("validatebox").validating=true;
					//$("#patno").validatebox("validate");
					// valbox.jdata <=> $("#patno").data("validatebox")
					//下面二句 可以让tooltip主动显示出来
					valbox.jdata.validating = true;
					valbox.validate();
					// 获得验证结果
					var patnoHasValue = valbox.isValid();
					if (patnoHasValue) {
						alert("序号验证通过");
					} else {
						alert("序号为空");
					}
				});
				$("#btn2").click(function(){
					var box = $("#urlVx");
					var value = box.prop("disabled");
					if(value == false){
						box.validatebox("setDisabled",true);
						$("#btn2 > span > span").text("启用URL");
						box.validatebox("validate");
					}
					else{
						box.validatebox("setDisabled",false);
						$("#btn2 > span > span").text("禁用URL");
						box.validatebox("validate");
					}
				});
	
			}
			$(init);
		</script>
	</div>
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>默认值""</td>
			<td>当不为空时，在输入框显示placeholder,<code>IE9+</code>,<code>chrome</code>支持<code>。2018-10-18</code></td>
			<td></td>
		</tr>
		<tr>
			<td>disabled</td>
			<td>默认值"false"</td>
			<td>当为true时，输入框被禁止使用。<code>2019-9-2</code></td>
			<td></td>
		</tr>
		<tr>
			<td>validType</td>
			<td>格式校验</td>
			<td>新增加身份证号校验'idcare',手机号检验'mobilephone'。<code>2020-01-19</code></td>
			<td></td>
		</tr>
		<tr class="mthtitle">
			<th>方法名</th>
			<th>说明</th>
			<th>入参</th>
			<th>返回值</th>
		</tr>
		<tr>
			<td>setDisabled</td>
			<td>改变disabled属性的值</td>
			<td>false/true</td>
			<td>jquery对象</td>
		</tr>
	</table>
	<prettyprint/>	
</body>
</html>